<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/jquery.validate.min.js"></script>
    <script src="/js/jquery.validation/1.14.0/messages_zh.min.js"></script>
    <style>
        input.error {
            border: 1px solid #E6594E;
        }
    </style>
</head>
<body>
<section id="container">
<#include "sider.ftl">
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        修改角色权限页面
                    </div>
                    <section class="panel">
                    <#--搜索框-->
                        <header class="panel-heading wht-bg">
                            <h4 class="gen-case">>>>>>>>>>>>>>>
                                <form action="#" class="pull-right mail-src-position">
                                    <div class="input-append">
                                        <input type="text" class="form-control search" placeholder="搜索^_^" id="keyword">
                                    </div>
                                </form>
                            </h4>
                        </header>
                        <form id="editRolePermissionForm">
                            <br>
                            <div class="form-group">
                                <label for="ruid">角色：</label>
                                <select name="ruuid" style="width: 200px;height: 35px;margin-left: 24px" id="ruid">
                                    <option>请选择角色</option>
                                    <option v-for="(item,index) in result1" v-bind:value="item.ruuid">
                                        {{item.rname}}
                                    </option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="pid">权限:</label>
                            <#-- <select name="pid" style="width: 200px;height: 35px;margin-left: 24px" id="pid">
                                 <option>请选择权限</option>
                                 <option v-for="(item,index) in result2" v-bind:value="item.pid">
                                     {{item.pname}}
                                 </option>
                             </select>-->

                                <label class="checkbox-inline" v-for="(item,index) in result2">
                                    <input type="checkbox" v-bind:value="item.pid" class="chk">{{item.pname}}
                                </label>
                            </div>
                        </form>
                        <div class="form-group">
                            <button type="button" id="delBtn" class="btn btn-success">删除权限</button>
                            <button type="button" id="addBtn" class="btn btn-primary">增加权限</button>
                        </div>
                </div>
        </section>
        </div>
        </div>
    </section>
    <#include "/foot.html">
</section>
</section>
</body>
</html>
<script>
    var x=[];
    var app = new Vue({
        el: "#editRolePermissionForm",
        data: {
            result1: [],
            result2: []
        }
    });

    $(function () {

        $.ajax({
            type: "Post",
            url: "/role/allRole.do",
            dataType: "json",
            success: function (data) {
                app.result1 = data.role;
            }
        });

        $.ajax({
            type: "POST",
            url: "/role/getPermission.do",
            dataType: "json",
            success: function (data) {
                app.result2 = data.permission;
            }
        });

        $("#ruid").change(function () {
            if ($("#ruid").val()=="请选择角色") {

                $(".chk").each(function () {
                    $(this).prop("checked",false);
                });

                return;
            }
            $.ajax({
               type:"POST",
                url:"/role/getRoleById.do",
                data:{
                   ruuid:$("#ruid").val()
                },
                dataType:"json",
                success:function (data) {

                    $(".chk").each(function () {
                        $(this).prop("checked",false);
                    });

                    $.each(data.permission,function (index,obj) {
                        $(".chk[value='"+obj.pid+"']").prop("checked", true);
                    })
                }
            });

        });




        $("#addBtn").click(function () {

            $(".chk:checked").each(function () {
                x.push($(this).val());
            });
            $.ajax({
                type: "POST",
                url: "/role/addRolePermission.do",
                data: {
                    pid:JSON.stringify(x),
                    ruuid:$("#ruid").val()
                },
                dataType: "json",
                success: function (data) {
                    if (data.flag) {
                        alert("成功添加");
                        window.location.href = "/role/getRole.do"
                    }
                }
            });

        });

        $("#delBtn").click(function () {
            $(".chk:checked").each(function () {
                x.push($(this).val());
            });

            $.ajax({
                type: "POST",
                url: "/role/delRolePermission.do",
                data: {
                    ruuid: $("#ruid").val(),
                    pid: JSON.stringify(x)
                },
                dataType: "json",
                success: function (data) {
                    if (data.flag) {
                        alert("删除成功");
                        window.location.href = "/role/getRole.do";
                    }
                }
            });
        });


       /* $(".chk").change(function () {
            alert("???");
            $(".chk:checked").each(function () {
                x.push($(this).val());
            });
            alert(x);
        });*/





    });




</script>